<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>原声响应式布局</title>
		<style type="text/css"></style>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<!--头部区域-->
		<header>
			<!--logo部分-->
			<div class="logo">
				<img src="images/logo-en.png"/>
			</div>
			<!--胶囊-->
			<div class="capsule">
				<span></span>
				<span></span>
				<span></span>
			</div>
			<!--nav导航栏-->
			<div class="nav">
				<ul>
					<li><a href="#">who we are</a></li>
					<li><a href="#">service</a></li>
					<li><a href="#">team</a></li>
					<li><a href="#">achievement</a></li>
					<li><a href="#">travel gallery</a></li>
					<li><a href="#">testimonials</a></li>
				</ul>
			</div>
		</header>
		<!--头部区域结束-->
		
		<!--滑动区域开始-->
		<div class="banner">
			<div class="Slider">
			<div class="box">
				<ul>
					<li>
						<img src="images/slider01.jpg"/>
						<div class="main">
							<h1>Travel - Let's go!</h1>
							<p> Do not hesitate to take a walk-and-go trip, travel is also a major part of life.</p>
						</div>
					</li>
					<li>
						<img src="images/slider02.jpg"/>
						<div class="main">
							<h1>Travel - I want to be free!</h1>
							<p> Free travel, not limited by route or time, I can travel as I want, and I am in charge of my travel.</p>
						</div>
					</li>
					<li>
						<img src="images/slider03.jpg"/>
						<div class="main">
							<h1>Travel - Living in countryside!</h1>
							<p>Living in a private house, enjoy different customs, enjoy different cuisines, and different nights.</p>
						</div>
					</li>
					<li>
						<img src="images/slider04.jpg"/>
						<div class="main">
							<h1>Travel - Wandering in the mountains and rivers!</h1>
							<p>In the embrace of nature, feel the greatness of the world and the preciousness of life. </p>
						</div>
					</li>
					<li>
						<img src="images/slider01.jpg"/>
						<div class="main">
							<h1>Travel - Let's go!</h1>
							<p> Do not hesitate to take a walk-and-go trip, travel is also a major part of life.</p>
						</div>
					</li>
				</ul>
			</div>
		</div>
		</div>
		<!--滑动区域结束-->
		
		<!--2.Who we are区域开始-->
		<div class="WhoWeAre">
			<div class="top">
				<img src="images/team1.jpeg"/>
			</div>
			<div class="bottom">
				<ul>
					<li>We are a professional free travel service team!</li>
					<li>We provide various services such as free travel planning, residential accommodation, car rental, and rural trekking route information.</li>
					<li>We have branches in most provinces and cities across the country, responsible for local tourism services.</li>
					<li>Our business has expanded to 23 countries and regions, and these countries and regions also have our international branches.</li>
					<li>So far, we have provided a variety of services for many travel enthusiasts in more than 50 countries and regions. Our service quality has been recognized by most customers.</li>
					<li>Who we are</li>
					<li>Who we are</li>
				</ul>
			</div>
		</div>
		<!--2.Who we are区域结束-->
		
		
		<!--Service区域开始-->
		<div class="Service">
			<div class="box">
				<div class="img">
					<img src="images/service1.jpg"/>
				</div>
				<div class="content">
					<h2>Travel - I want to be free!</h2>
					<span> Free travel, not limited by route or time, I can travel as I want, and I am in charge of my trav</span>
					<a href="#">点击查看</a>
				</div>
			</div>
			<div class="box">
				<div class="img">
					<img src="images/service2.jpg"/>
				</div>
				<div class="content">
					<h2>Travel - Living in countryside!</h2>
					<span>Living in a private house, enjoy different customs, enjoy different cuisines, and different nights.</span>
					<a href="#">点击查看</a>
				</div>
			</div>
			<div class="box">
				<div class="img">
					<img src="images/service3.jpg"/>
				</div>
				<div class="content">
					<h2>Travel - Wandering in the mountains and rivers!</h2>
					<span>In the embrace of nature, feel the greatness of the world and the preciousness of life. </span>
					<a href="#">点击查看</a>
				</div>
			</div>
		</div>
		<!--Service区域结束-->
		
		<!--4.Team区域开始-->
		<div class="Team">
			<div class="Team-box">
				<!--左侧-->
				<div class="Team-left">
					<img src="images/team2.jpg"/>
				</div>
				<!--右侧-->
				<div class="Team-right">
					We have different teams for different services. The market development team is responsible for the development of the global market. The public relations team is responsible for communicating with the administrative and legal departments of various countries and regions around the world. The travel business team is responsible for arranging various services for customers.
					We also have our own internal team responsible for business such as human resources, logistics, and finance.
				</div>
			</div>
			
		</div>
		<!--4.Team区域结束-->
		
		<!--5.Achievement区域开始-->
		<div class="Achievement">
			<div class="box">
				<ul>
					<li>
						<div class="center">
							<div class="top">
								<img src="images/client1.jpg"/>
							</div>
							<h3>Mr. White, a company manager</h3>
							<p>I got a truly free travel. I felt the beauty of China's nature and the enthusiasm of Chinese people!</p>
							<div class="bottom">
								<a href="#">点击查看</a>
							</div>
						</div>	
					</li>
					<li>
						<div class="center">
							<div class="top">
								<img src="images/client3.jpg"/>
							</div>
							<h3>Miss Whitney, a company secretary</h3>
							<p>I am traveling freely in Hungary this time, and it feels really great! Thank you for your professional support.</p>
							<div class="bottom">
								<a href="#">点击查看</a>
							</div>
						</div>	
					</li>
					<li>
						<div class="center">
							<div class="top">
								<img src="images/client2.jpg"/>
							</div>
							<h3>Ms. Stone, doctor</h3>
							<p>This free tour is really great! Thank you for all the arrangements and help from your company.</p>
							<div class="bottom">
								<a href="#">点击查看</a>
							</div>
						</div>	
					</li>
					
					<li>
						<div class="center">
							<div class="top">
								<img src="images/client4.jpg"/>
							</div>
							<h3>Mr. Smith, retired teacher</h3>
							<p>Thank you for providing me with such a good opportunity from the walk-and-go travel service company, allowing me to travel freely in ancient China.</p>
							<div class="bottom">
								<a href="#">点击查看</a>
							</div>
						</div>	
					</li>
				</ul>
			</div>
		</div>
		<!--5.Achievement区域结束-->
		
		<!--6.Travel Gallery 区域开始-->
		
		<!--6.Travel Gallery 区域结束-->
		
		<!--底部区域开始-->
		<div class="footer">
			<!--背景视频-->
			<video autoplay="autoplay" loop="loop" muted="muted">
				<source src="videos/hiking.mp4" type="video/mp4"></source>
				<source src="videos/hiking.mp4" type="video/ogg"></source>
				<source src="videos/hiking.mp4" type="video/webm"></source>
			</video>
			<!--主要内容-->
			<div class="content">
				<div class="content-left">
					<div class="Contact">
						<ul>
							<li>Address: Room 1201, A Building, A Road, Chongwen District, Beijing</li>
							<li>Email: service@szjz.com</li>
							<li>Tel: 86-010-876908765</li>
						</ul>
					</div>
					<div class="Quick">
						<ul>
							<li>Introduction of company</li>
							<li>Contact information of branches all over the world</li>
							<li>Typical travel plan reference</li>
						<li>Frequently Asked Questions</li>
							<li>Contact US</li>
						</ul>
					</div>
				</div>
				<div class="content-right">
					<video controls="controls" autoplay="autoplay" loop="loop" muted="muted">
						<source src="videos/hiking.mp4" type="video/mp4"></source>
						<source src="videos/hiking.mp4" type="video/ogg"></source>
						<source src="videos/hiking.mp4" type="video/webm"></source>
					</video>
				</div>
			</div>
		</div>
		<!--底部区域结束-->
		<!--底部区域结束-->
		<script type="text/javascript" src="js/index.js"></script>
	</body>
</html>
